<template>
  <view class="index">
    <view class="jtop">
      <view class="status_bar"><!-- 这里是状态栏 --></view>
      <view class="jtop_l"></view>
      <view class="jtop_c">我</view>
    </view>
    <view class="tophr"></view>

    <view class="us_top">
      <view class="us_tt" @tap="to_user_msg">
        <view class="us_ttl">
          <view class="us_ttlt">
            <text>{{
              user.corpBaseInfoResponse
                ? user.corpBaseInfoResponse.shortName
                : ''
            }}</text
            ><image
              src="../../static/img/user/ic_certificate.png"
              v-if="
                user.corpBaseInfoResponse ? user.corpBaseInfoResponse.id : ''
              "
            ></image>
          </view>
          <view class="us_ttlf">
            <text class="us_ttlf1">{{
              user.corpBaseInfoResponse ? user.userInfoResponse.realName : ''
            }}</text>
            <text class="us_ttlf2">{{ user.position }}</text>
          </view>
        </view>

        <image :src="head_jdelulpture" class="us_ttr"></image>
      </view>
      <view class="us_tf" @tap="to_user_ma">
        <text class="us_tfl">请添加我的墨斗名片</text>
        <image src="../../static/img/user/ic_right.png" class="us_tfr1"></image>
        <image
          src="../../static/img/user/ic_qrcode_gray.png"
          class="us_tfr2"
        ></image>
      </view>
    </view>

    <view class="us_bs">
      <!-- <view class="us_b" @tap="to_user_share">
				<image src="../../static/img/user/ic_gift.png" class="us_bl"></image>
				<view class="us_br">
					<text>奖励</text>
					<image src="../../static/img/user/ic_right.png" ></image>
				</view>
			</view> -->
      <view class="us_b" @tap="to_user_set">
        <image src="../../static/img/user/ic_setting.png" class="us_bl"></image>
        <view class="us_br noborder">
          <text>设置</text>
          <image src="../../static/img/user/ic_right.png"></image>
        </view>
      </view>
    </view>

    <view class="us_bs" v-if="user.corpBaseInfoResponse">
      <view class="us_b" @tap="to_tream">
        <image
          src="../../static/img/user/ic_management.png"
          class="us_bl"
        ></image>
        <view class="us_br">
          <text>管理团队</text>
          <image src="../../static/img/user/ic_right.png"></image>
        </view>
      </view>
    </view>

    <!-- 弹出层 -->
    <view :class="[aashowpop ? 'tc' : 'tc hide']">
      <view class="jtop_bj" @click="abtTC"></view>

      <view class="tc_box">
        <view class="tc_boxt">
          未登录
        </view>
        <view class="tc_boxtc">
          您未登录，需要登录后才能继续
        </view>
        <view class="tc_f">
          <!-- <view class="tc_fl" @click="jshow_pop">取消</view> -->
          <view class="tc_fr" @click="abtTC2">确定</view>
        </view>
      </view>
    </view>
    <!-- 	<view class="btn-row">
			<button v-if="!hasLogin" type="primary" class="primary" @tap="bindLogin">登录</button>
			<button v-if="hasLogin" type="default" @tap="bindLogout">退出登录</button>
		</view> -->
  </view>
</template>

<script>
import request from '@/common/request.js';
import { mapState, mapMutations } from 'vuex';

export default {
  computed: {
    ...mapState(['hasLogin', 'forcedLogin']),
  },
  data() {
    return {
      user: {},
      aashowpop: false,
      head_jdelulpture: './../static/img/Default_avatar.png',
    };
  },
  onShow() {
    var res = global.isLogin();
    if (!res) {
      // this.aashowpop = true;

      uni.navigateTo({
        url: '../login/login',
      });

      //   uni.showModal({
      //    title:'未登录',
      //    content:"您未登录，需要登录后才能继续",
      // showCancel: false,
      //    success:function(){
      //      uni.navigateTo({
      //      	url: '../login/login'
      //      });
      //    }
      //   })
      return;
    } else {
      this.aashowpop = false;
      // 获取用户信息
      request({
        url: '/ucenter/corp-user/corp/default',
        method: 'GET',

        success: res => {
          if (res.data.success == true) {
            console.log('用户信息1：', res.data.data);
            uni.setStorageSync('user', res.data.data);
            this.user = res.data.data;
            console.log('sdf', this.user.userInfoResponse.avatar);
            this.head_jdelulpture = this.user.userInfoResponse.avatar;
            if (
              !this.user.userInfoResponse.avatar ||
              this.user.userInfoResponse.avatar == ''
            ) {
              this.head_jdelulpture = '../../static/img/Default_avatar.png';
            }
          } else {
            uni.navigateTo({
              url: '../login/login',
            });
            console.log('qqqqqqqqq222222');
            return false;
          }
        },
      });
    }
  },
  methods: {
    abtTC() {
      // this.aashowpop = false
    },
    abtTC2() {
      uni.navigateTo({
        url: '../login/login',
      });
    },
    // 跳转
    to_tream() {
      uni.navigateTo({
        url: '../user/tream',
      });
    },
    to_user_set() {
      uni.navigateTo({
        url: '../user/user_set',
      });
    },
    to_user_share() {
      // uni.navigateTo({
      // 	url: '../user/user_share',
      // });
      uni.navigateTo({
        url: '../reg/vw?title=奖励&url=https://mlito.com/md/jl.html',
      });
    },
    to_user_ma() {
      uni.navigateTo({
        url: '../user/user_ma',
      });
    },
    to_user_msg() {
      uni.navigateTo({
        url: '../user/user_msg',
      });
    },

    ...mapMutations(['logout']),
    bindLogin() {
      uni.navigateTo({
        url: '../login/login',
      });
    },
    bindLogout() {
      this.logout();
      /**
       * 如果需要强制登录跳转回登录页面
       */
      if (this.forcedLogin) {
        uni.reLaunch({
          url: '../login/login',
        });
      }
    },
  },
};
</script>

<style>
.us_bs {
  width: 100%;
  height: auto;
  display: block;
  float: left;
  margin: 20rpx 0 0 0;
  border: 1px solid #dddddd;
  border-left: 0;
  border-right: 0;
  background: #ffffff;
}
.us_b {
  width: 100%;
  height: auto;
  display: block;
  float: left;
}
.us_bl {
  width: 48rpx;
  height: 48rpx;
  display: block;
  float: left;
  margin: 21rpx 32rpx 0 30rpx;
}
.us_br {
  width: 640rpx;
  height: 90rpx;
  display: block;
  float: left;
  border-bottom: 1px solid #dddddd;
}
.us_br text {
  width: auto;
  height: auto;
  display: block;
  float: left;
  font-size: 34rpx;
  line-height: 42rpx;
  color: #000000;
  margin: 24rpx 0 0 0;
}
.us_br image {
  width: 16rpx;
  height: 25rpx;
  display: block;
  float: right;
  margin: 33rpx 30rpx 0 0;
}
.us_b:last-child .us_br {
  border: 0;
}

.us_top {
  width: 680rpx;
  height: 420rpx;
  display: block;
  float: left;
  margin: 30rpx 30rpx 20rpx;
  background: #ffffff;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.08);
  border-radius: 12rpx;
}
.us_tt {
  width: 680rpx;
  height: 330rpx;
  display: block;
  float: left;
}
.us_ttl {
  width: 480rpx;
  height: 330rpx;
  display: block;
  float: left;
  margin: 0 0 0 40rpx;
}
.us_ttr {
  width: 114rpx;
  height: 114rpx;
  display: block;
  float: right;
  margin: 40rpx 40rpx 0 0;
  border-radius: 8rpx;
}
.us_ttlt {
  width: 100%;
  height: auto;
  display: block;
  float: left;
  margin: 40rpx 0 0 0;
}
.us_ttlt text {
  width: auto;
  height: auto;
  display: block;
  float: left;
  font-size: 32rpx;
  line-height: 40rpx;
  color: #838a91;
  margin: 0 6rpx 0 0;
}
.us_ttlt image {
  width: 36rpx;
  height: 36rpx;
  display: block;
  float: left;
  margin: 2rpx 0 0rpx 0;
}
.us_ttlf {
  width: 100%;
  height: auto;
  display: block;
  float: left;
  margin: 100rpx 0 0 0;
}
.us_ttlf1 {
  width: 100%;
  height: auto;
  display: block;
  float: left;
  font-size: 44rpx;
  line-height: 52rpx;
  color: #000000;
  margin: 0 0rpx 0 0;
}
.us_ttlf2 {
  width: 100%;
  height: auto;
  display: block;
  float: left;
  font-size: 28rpx;
  line-height: 36rpx;
  color: #888888;
  margin: 10rpx 0rpx 0 0;
}
.us_tf {
  width: 100%;
  height: 88rpx;
  display: block;
  float: left;
  margin: 0rpx 0 0 0;
  border-top: 1px solid #dddddd;
}
.us_tfl {
  width: auto;
  height: 88rpx;
  display: block;
  float: left;
  font-size: 28rpx;
  line-height: 88rpx;
  color: #888888;
  margin: 0rpx 0rpx 0 40rpx;
}
.us_tfr1 {
  width: 16rpx;
  height: 25rpx;
  display: block;
  float: right;
  margin: 32rpx 30rpx 0 0;
}
.us_tfr2 {
  width: 40rpx;
  height: 40rpx;
  display: block;
  float: right;
  margin: 24rpx 10rpx 0 0;
}

.index {
  background: rgb(242, 242, 242);
  width: 100%;
  height: auto;
}
.jtop {
  width: 100%;
  height: 88rpx;
  background: #ffffff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  box-shadow: inset 0px -1px 0px #dddddd;
}
.jtop_l {
  width: auto;
  height: 88rpx;
  display: block;
  float: left;
  font-size: 32rpx;
  color: #000000;
  line-height: 88rpx;
  margin: 0 0 0 30rpx;
}
.jtop_l image {
  width: 48rpx;
  height: 48rpx;
  display: block;
  float: left;
  margin: 20rpx 0 20rpx 0;
}
.jtop_lt {
  margin: 0 0 0 10rpx;
}
.jtop_r {
  width: 48rpx;
  height: 48rpx;
  display: block;
  float: right;
  margin: 20rpx 20rpx 0 0;
}
.jtop_rl {
  margin: 20rpx 30rpx 0 0;
}
.jtop_r image {
  width: 48rpx;
  height: 48rpx;
  display: block;
  float: left;
}
.jtop_c {
  width: 70%;
  height: 48rpx;
  line-height: 48rpx;
  display: block;
  float: left;
  position: fixed;
  top: 20rpx;
  left: 15%;
  text-align: center;
  font-size: 36rpx;
  color: #000000;
}
.jtop_c image {
  width: 36rpx;
  height: 36rpx;
  display: inline-block;
  float: none;
  margin-bottom: -5rpx;
  margin-left: 5rpx;
}
.jtop_b {
  width: 100%;
  height: auto;
  background: #ffffff;
  position: fixed;
  top: 88rpx;
  left: 0;
  z-index: 1001;
}
.tophr {
  width: 100%;
  height: 88rpx;
}

.jtop_bj {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 997;
}
.tc {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  display: block;
}

.tc_box {
  width: 540rpx;
  height: auto;
  background: #ffffff;
  border-radius: 14rpx;
  margin: 460rpx 105rpx 0;
  position: relative;
  z-index: 10001;
  overflow: hidden;
}
.tc_boxt {
  width: 100%;
  height: 44rpx;
  font-size: 36rpx;
  line-height: 44rpx;
  display: block;
  float: left;
  text-align: center;
  margin: 40rpx 0 20rpx;
  color: #000000;
}
.tc_boxtc {
  width: 100%;
  height: 36rpx;
  font-size: 28rpx;
  line-height: 36rpx;
  display: block;
  float: left;
  text-align: center;
  margin: 0rpx 0 30rpx;
  color: #666666;
}
.tc_boxi {
  width: 460rpx;
  height: 88rpx;
  background: #ffffff;
  border-radius: 8rpx;
  border: 1px solid #dddddd;
  display: block;
  float: left;
  margin: 0rpx 40rpx 22rpx 40rpx;
}
.tc_boxi input {
  width: 70%;
  height: 48rpx;
  margin: 20rpx 5%;
  font-size: 32rpx;
  color: #000000;
  float: left;
}
.tc_boxi image {
  width: 36rpx;
  height: 36rpx;
  display: block;
  float: right;
  margin: 26rpx 20rpx 0rpx 0;
}
.tc_f {
  width: 100%;
  height: 100rpx;
  display: block;
  float: left;
  border-top: 1px solid #dcdee3;
  margin: 20rpx 0 0;
}
.tc_fl {
  width: 269rpx;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  font-size: 36rpx;
  color: #256aff;
  display: block;
  float: left;
  border-right: 1px solid #dcdee3;
}
.tc_fr {
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  font-size: 36rpx;
  color: #256aff;
  display: block;
  float: left;
}
.tc_fr2 {
  width: 269rpx;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  font-size: 36rpx;
  color: #eb5342;
  display: block;
  float: left;
}
</style>
